<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>EPC</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            overflow: hidden;
        }

        .hearder, .footer {
            background-color: white;
            z-index: 100;
        }

        .hearder {
            height: 100px;
            padding-left: 200px;
        }

        .footer {
            height: 50px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        .hearder div {
            margin: 15px 30px 50px 30px;
            height: 60px;
            line-height: 60px;
            float: left;
            font-size: 40px;
            font-weight: bold;
        }

        .video_mask {
            width: 100%;
            height: calc(100% - 150px);
            position: absolute;
            left: 0;
            top: 100px;
            z-index: -1;
            overflow: hidden;
            /*background-color: rgba(0, 0, 0, 0.5);*/
            /*background-image: url("./images/loginbackground.png");*/
            /*background-repeat: no-repeat;*/
            /*background-size: 100% auto;*/
        }

        .video_mask img {
            width: 100%;
            height: auto !important;
        }

        .login {
            height: 310px;
            width: 330px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 4px;
            position: absolute;
            left: 75%;
            top: 51%;
            margin: -155px 0 0 -165px;
            z-index: 99;
        }

        .login h1 {
            text-align: center;
            /*color: #fff;*/
            font-size: 24px;
            margin-bottom: 5px;
        }

        .login h3 {
            text-align: center;
            /*color: #fff;*/
            /*font-size: 24px;*/
            margin-bottom: 15px;
        }

        .form_code {
            position: relative;
        }

        .form_code .code {
            position: absolute;
            right: 2px;
            top: 1px;
            cursor: pointer;
        }

        .login_btn {
            width: 100%;
        }

        .text-color {
            color: #004289;
            font-size: 31px!important;
            margin-top: 19px!important;
            margin-left: -10px!important;
        }

        .layui-tab-title li {
            color: #999;
        }

        .layui-tab-title {
            border-bottom-style: none;
            text-align: center;
        }

        .layui-tab-brief > .layui-tab-title .layui-this {
            color: rgb(10, 180, 227);
        }

        .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after {
            border-bottom: 2px solid rgb(10, 180, 227);
        }

        .input-icon {
            position: absolute;
            top: 6px;
            left: 10px;
            height: 38px;
            line-height: 1.3;
            font-size: 20px;
            color: #999;
        }

        .layui-form-item {
            position: relative;
        }

        .layui-input {
            padding-left: 40px;
        }

        .login-icon {
            margin-left: 10px;
        }
        .layui-input:focus, .layui-textarea:focus{
            border-color: #229FFF!important;
        }
        .input-remove{
            position: absolute;
            top: 6px;
            right: 10px;
            height: 38px;
            line-height: 1.3;
            font-size: 22px;
            color: #999;
            cursor: pointer;
        }
        input[type=text]::-ms-clear{
            display: none!important;
        }
        input[type=password]::-ms-reveal{
            display: none!important;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="hearder">
    <div><img src="./images/logo.png" style="width: 150px;" id="loginLogo"></div>
    <div class="text-color" id="loginText">电子备件目录</div>
</div>
<!--<div class="video_mask"></div>-->
<div class="layui-carousel video_mask" id="carousel" lay-filter="carousel">
    <div id="slides" carousel-item>
        <img src="images/loginbackground.png">
        <img src="images/car-system.jpg">
        <img src="images/x-2.jpg">
    </div>
</div>
<div class="login">
    <h1 class="text-color">欢迎登录</h1>
    <h3 class="layui-word-aux" style="text-align: center">EPC经销商</h3>
    <!--Tab登录页-->
    <!--<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">-->
    <!--<ul class="layui-tab-title">-->
    <!--<li class="layui-this">账号密码登录</li>-->
    <!--<li>手机号登录</li>-->
    <!--</ul>-->
    <!--<div class="layui-tab-content" style="height: 100px; padding-top: 20px">-->
    <!--<div class="layui-tab-item layui-show">-->
    <form class="layui-form">
        <div class="layui-form-item">
            <input class="layui-input" id="username" name="username" placeholder="请输入工号" lay-verify="required"
                   type="text"
                   autocomplete="off">
            <i class="layui-icon layui-icon-username input-icon"></i>
        </div>
        <div class="layui-form-item">
            <input class="layui-input" id="password" name="password" placeholder="请输入密码" lay-verify="required"
                   type="password"
                   autocomplete="off">
            <i class="layui-icon layui-icon-password input-icon"></i>

        </div>
        <div class="layui-form-item form_code">
            <input id="identifyingCode" class="layui-input" name="code" placeholder="请输入图形验证码" lay-verify="required"
                   type="text"
                   autocomplete="off">
            <i class="layui-icon layui-icon-vercode input-icon"></i>

            <div class="code"><img id="identifying" src="" width="116" height="36"></div>
        </div>
        <!--<div class="layui-form-item" style="margin-top: -10px">-->
        <!--<input type="checkbox" name="" title="记住密码" lay-skin="primary">-->
        <!--<div style="float: right;margin-top: 9px;display: inline-block;vertical-align: middle;cursor: pointer">-->
        <!--<span style="color: #999;">忘记密码<i class="layui-icon layui-icon-tips"></i></span>-->
        <!--</div>-->
        <!--</div>-->
        <button class="layui-btn login_btn" lay-submit="" lay-filter="login" style="background-color: #229FFF">登录
        </button>
        <!--<div class="layui-form-item" style="">-->
        <!--<div style="margin-top: 10px;display: inline-block;vertical-align: middle;cursor: pointer">-->
        <!--<span style="color: #999;">其他登录方式-->
        <!--<i class="login-icon layui-icon layui-icon-login-wechat" style="font-size: 16px; color: rgb(39,172,28);"></i>-->
        <!--<i class="login-icon layui-icon layui-icon-login-qq" style="font-size: 16px; color: rgb(96, 189, 223);"></i>-->
        <!--<i class="login-icon layui-icon layui-icon-login-weibo" style="font-size: 16px; color: rgb(223, 23, 76);"></i>-->
        <!--</span>-->
        <!--</div>-->
        <!--<div style="float: right;margin-top: 9px;display: inline-block;vertical-align: middle;cursor: pointer">-->
        <!--<span style="color: #999;">注册用户</span>-->
        <!--</div>-->
        <!--</div>-->
    </form>
    <!--</div>-->
    <!--<div class="layui-tab-item">内容2</div>-->
    <!--</div>-->
</div>

<div class="footer">
    <div class="layui-word-aux" style="margin: 10px auto;text-align: center">版权所有: 长安汽车 &nbsp;版本号: v1.0.0</div>
</div>
<div id="update-dialog" style="display: none;text-align: center;">

    <img id="close" src="images/guanbi.png" onclick="closeDialog()" style="padding: 20px;position: absolute;right: 0;cursor:pointer">

    <img src="images/rocket.png" style="height: 290px;">

    <div style="font-size: 18px;margin-top: 9px;">
        <p>尊敬的EPC用户，您好！</p>
        <p style="margin-top: 9px;">为了您能获得更安全的网络环境和更好的用户体验</p>
        <p id="tip3" style="margin-top: 9px;">我们强烈建议您升级浏览器</p>
    </div>

    <div style="height: 80px; margin: 20px;">
        <!--<div style="float: left;width: 30%;border: #596a72 1.5px solid;border-radius: 6px;">-->
            <!--<a href="browser/qq.exe">-->
            <!--<div style="float: left;">-->
                <!--<img src="images/icon_qq_browser.png" style="height: 40px;padding: 10px;margin-left: 10px;">-->
            <!--</div>-->
            <!--<div style="float: left;margin-left: 6px;font-size: 16px;font-family: '微软雅黑';height: 40px;line-height:40px;margin-top: 8px;">-->
                <!--QQ浏览器-->
            <!--</div>-->
            <!--</a>-->
        <!--</div>-->
        <div style="float: left;width: 35%;margin-left:10%;border: #596a72 1.5px solid;border-radius: 6px;">
            <a href="browser/chrome.exe">
            <div style="float: left;">
                <img src="images/icon_chrome.png" style="height: 40px;padding: 10px;margin-left: 10px;">
            </div>
            <div style="float: left;margin-left: 20px;font-size: 16px;font-family: '微软雅黑';height: 40px;line-height:40px;margin-top: 8px;">
                Chrome浏览器
            </div>
            </a>
        </div>
        <div style="float: left;width: 35%;margin-left: 10%;border: #596a72 1.5px solid;border-radius: 6px;">
            <a href="browser/firefox.exe">
            <div style="float: left;">
                <img src="images/icon_firefox.png" style="height: 40px;padding: 10px;margin-left: 10px;">
            </div>
            <div style="float: left;margin-left: 20px;font-size: 16px;font-family: '微软雅黑';height: 40px;line-height:40px;margin-top: 8px;">
                <p>火狐浏览器</p>
            </div>
            </a>
        </div>

    </div>
</div>
<!--[if lt IE 9]>
<script src="./plugs/jquery-1.12.3.js" ></script>
<script>
    $("#close").hide();
    $('.login').hide();
    //$('#update-dialog').css('display','block');
    $('#tip3').html('EPC不支持IE8及以下浏览器，请您升级浏览器后再访问');
</script>
<![endif]-->
<script src="./plugs/jquery.js"></script>
<script src="./js/baseUrl.js"></script>
<script src="./layui/layui.js"></script>
<!--<script src="./js/Cookie.js"></script>-->
<script src="./plugs/jsencrypt.js"></script>
<script>
        // 获取初始化数据
        jQuery.support.cors=true;
        $.ajax({
            type: "POST",
            url: parent.getApiUrl("system/sys-slide-show/selectSlideShow"),
            async: true,
            cache: false,
            dataType: "json",
            crossDomain: true ,
            success: function (data) {
                var slides = data.data || []
                $('#slides').empty()
                if (slides.length === 0){
                    var img = '<img src="./images/loginbackground.png">'
                    $('#slides').append(img)
                } else {
                    $.each( slides, function(i, n){
                        var img = '<img src="'+parent.getApiUrl('system/sys-slide-show/getFile?filePath='+n.imagePath)+'">'
                        $('#slides').append(img)
                    });
                }

            },
            error: function (err, a, b) {
                console.log(JSON.stringify(err),a,b);
            }
        })
        $.ajax({
            type: "GET",
            url: getApiUrl("system/sys-system-settings/search"),
            async: false,
            success: function (data) {
                console.log(data);
                var logoPath2 = getApiUrl('system/sys-slide-show/getFile') + '?token=undefined' + '&filePath=' + data.data[1].logoPath + ''
                $('#loginLogo').attr("src",logoPath2)
                $('#loginText').text(data.data[0].name)
            }
        })
</script>
<script>
    $(function () {
        $('.layui-form :input').bind('input propertychange', function()
        {
            //获取.input-form下的所有 <input> 元素,并实时监听用户输入
            //逻辑
            if ($(this).val()&&$(this).prop("id")!='identifyingCode'){
                if($(this).next().prop("className").indexOf("input-remove") === -1){
                    var dom = '<i class="layui-icon layui-icon-close-fill input-remove"></i> '
                    $(this).after(dom)
                }
            }else{
                if($(this).next().prop("className").indexOf("input-remove")>-1){
                    $(this).next().remove()
                }
            }
        })
        $('.layui-form').on('click','.input-remove',function () {
            $(this).prev().val('')
            $(this).remove()
        })

    })


</script>
<script>
    layui.config({
        base: './js/'
    }).extend({
        notice: 'notice'
    });
    layui.use(['form', 'layer', 'element', 'carousel'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : parent.layer,
            $ = layui.jquery
            , element = layui.element
            , carousel = layui.carousel;
        carousel.render({
            elem: '#carousel'
            , width: '100%' //设置容器宽度
            , height: 'calc(100% - 150px)'
            , arrow: 'hover' //始终显示箭头
            , indicator: 'none'
            ,interval:5000
            //,anim: 'updown' //切换动画方式
        });
        //登录按钮事件
        form.on("submit(login)", function (data) {

            login();
            return false;
        })

        browserCheck();
    })

    /**
     * 浏览器检查
     */
    function browserCheck() {
        if (!!window.ActiveXObject || "ActiveXObject" in window){
            showBrowserUpdateDialog();
        }else{
            //alert('NOT IE');
        }
    }
    function showBrowserUpdateDialog() {
        //页面层-自定义

        layer.open({
            type: 1,
            title: false,
            area: ['700px', '500px'],
            closeBtn: 0,
            shadeClose: false,
            content: $('#update-dialog')
        });
    }

    function closeDialog() {
        layer.closeAll();
    }

    function login() {
        var loginId = $('#username').val().toUpperCase();
        var password = $('#password').val();
        var identifyingCode = $('#identifyingCode').val().trim();
        var publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCrWhB6f7MQIg51sULk0mQi6WrEv1ZjkbYr0sXp1b2oe8fT3WkkKurYBec05bGKAm02zSB7OBNfs2qVyMgRKUZNmqGvT+wMvQS0lfhXisXYqu+aRWPYatud+Y40aURjdui+sqlFIVLEdvbjLqnEhielTIoCaNULwmgCLdPOjZoJvwIDAQAB";
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(publicKey);
        var encryptLogin = encrypt.encryptLong(loginId);
        var encryptPwd = encrypt.encryptLong(password);
        $.ajax({
            type: "POST",
            url: parent.getApiUrl("system/sys-dealer/login"),
            data: {
                account: encryptLogin,
                password: encryptPwd,
                identifyingCode: identifyingCode,
                identifyingId: identifyingId
            },
            success: function (result) {
                if (result.ok) {
                    var username = result.data.name;
                    var userid = result.data.account;
                    var token = result.data.token;
                    localStorage.setItem('username', username);
                    localStorage.setItem('frontuserid', userid);
                    localStorage.setItem('token', token);
                    // setCookie('isLogin','1',30);
                    window.location.href = "./index.html";
                } else {
                    notice(result.message)
                    getCode()
                }

            }
        })
    }

    function notice(message) {

        layui.use(['notice', 'jquery', 'layer'], function () {
            var notice = layui.notice;
            var layer = layui.layer;
            var $ = layui.jquery;

            notice.init({
                type: "default",
                autoClose: true,
                title: message
            });
        });

    }

    function getCode() {
        var rand = Math.floor(Math.random() * 1000000).toString()
        while (rand.length < 6) {
            rand = 0 + rand
        }
        identifyingId = Math.round(new Date().getTime() / 1000) + rand
        // var identifyingCode = randomString(4)
        // 获取验证码
        $('#identifying').attr('src', parent.getApiUrl('kaptcha/identifyingCode?identifyingId=' + identifyingId))
    }
</script>
<script language="javascript">
    function randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>
<script>
    $(function () {
        getCode()
        var identifyingId = ''
        $('.code').click(getCode)

    })
</script>

</body>
